<template>
  <business-layout title='历史数据' custom-title>
    <!--    <template slot='header'>-->
    <!--      <div class='table-tab'>-->
    <!--        <a-tabs v-model='activeKey' type='editable-card' @edit='handleEditTab'>-->
    <!--          <a-tab-pane v-for='item in tabs' :key='item.id'>-->
    <!--            <span slot='tab'>-->
    <!--              <a-icon type='edit' class='edit-tab-color' @click.stop='handleEditTab(item.id, "edit")' />-->
    <!--              {{ item.pageName }}-->
    <!--            </span>-->
    <!--          </a-tab-pane>-->
    <!--        </a-tabs>-->
    <!--      </div>-->

    <!--      <div class='table-operator' style='height: 20px'>-->
    <!--        <a-button style='float: right' type='primary' icon='plus' @click='handleAdd'>新建</a-button>-->
    <!--      </div>-->
    <!--    </template>-->
    <div style='height: 100%;'>
      <div style='height: 50%;'>
        <div style='height: 10%'>
          <a-row>
            <a-form :form='form' layout='inline' @submit='handleQueryData'>
              <a-form-item>
                <a-select style='width: 140px;' placeholder='请选择' v-decorator="['itemId']"
                          :options='pointList'>
                </a-select>
              </a-form-item>
              <a-form-item label='指定日期'>
                <a-date-picker showTime v-decorator="['startTime' ]" valueFormat='YYYY-MM-DD HH:mm:ss' />
              </a-form-item>
              <a-form-item label='至'>
                <a-date-picker showTime v-decorator="['endTime']" valueFormat='YYYY-MM-DD HH:mm:ss' />
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 90%'>
          <line-chart
            :loading='loading'
            height='100%'
            width='100%'
            :id='"line-security-analyze"'
            :x-data='["a", "b", "c", "d", "e", "f"]'
            :y-data='[1, 2, 3, 4, 5, 6]'
          />
        </div>
      </div>
      <!--      <history-chart-item-->
      <!--        :mark='item.mark'-->
      <!--        :moduleId='moduleId'-->
      <!--        v-for='item in reportList'-->
      <!--        :chart-type-code='item.reportTypeDicId'-->
      <!--        :key='item.id'-->
      <!--        :report-name='item.reportName'-->
      <!--        :char-key='item.id'-->
      <!--        @remove='handleRemove(item)'-->
      <!--        @edit='pointList => handleEdit(item, pointList)'-->
      <!--      />-->
    </div>
    <!--    <create-chart-->
    <!--      :moduleId='moduleId'-->
    <!--      ref='createModal'-->
    <!--      :visible='visible'-->
    <!--      :loading='confirmLoading'-->
    <!--      :model='mdl'-->
    <!--      @up-loading='(bol)=> confirmLoading = bol'-->
    <!--      @cancel='handleCancel'-->
    <!--      @ok='handleOk'-->
    <!--    />-->

    <!--    <create-tab-->
    <!--      :title='"页面"'-->
    <!--      ref='createTab'-->
    <!--      :visible='historyVisible'-->
    <!--      :loading='confirmLoading'-->
    <!--      :model='historyTimeModel'-->
    <!--      @cancel='handlHistoryTimeeCancel'-->
    <!--      @ok='handleHistoryOk' />-->
  </business-layout>
</template>

<script>
import { LineChart, BarChart } from '@/business-components/charts'
import CreateChart from '@/business-components/create-chart/index.vue'
import CreateTab from '@/business-components/create-tab/index.vue'
import HistoryChartItem from '@/business-components/history-chart-item/index.vue'
import {
  create,
  update,
  findAllPageByModuleId,
  remove,
  removeReport,
  findAllReportByPageId,
  createChart,
  updateChart, findHistoryGraphData
} from '@/api/historyTime'
import CreatePoint from '@/business-components/create-point/index.vue'

// 模块id 不同模块id不同
const moduleId = '06'
const pageType = 'history'
let mark = 0
export default {
  name: 'HistoryTime',
  mixins: [],
  components: {
    CreatePoint,
    CreateTab,
    LineChart,
    BarChart,
    CreateChart,
    HistoryChartItem
  },
  props: {},
  watch: {
    activeKey (val) {
      if (val) {
        this.findAllReportByPageId()
      }
    }
  },
  computed: {},
  data () {
    this.moduleId = moduleId
    this.pageType = pageType
    return {
      activeKey: '',
      form: this.$form.createForm(this),
      menuId: '',
      myBarChart: null,
      barSpinning: true,
      visible: false,
      loading: false,
      mdl: null,
      historyTimeModel: null,
      tabs: [],
      historyVisible: false,
      confirmLoading: false,
      reportList: []
    }
  },
  created () {
    this.$message.warning('暂未开发!')
    // this.menuId = this.$route.fullPath
    // this.findAllPageByModuleId()
  },
  methods: {
    handleQueryData (e) {
      e.preventDefault()
      const form = this.form
      this.loading = true
      const that = this
      const values = this.form.getFieldsValue(['itemId', 'startTime', 'endTime'])
      // findHistoryGraphData({
      //   moduleId: this.moduleId,
      //   ...values
      // }).then(res => {
      //   const { dataItems } = res
      //   if (dataItems) {
      //     that.yData = dataItems.map(item => item.loadValue)
      //     that.xData = dataItems.map(item => item.time)
      //   } else {
      //     that.yData = []
      //     that.xData = []
      //   }
      // })
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  },
  mounted () {
    this.handleQueryData()
  },
  updated () {
  },
  destroyed () {
  }
}
</script>
<style lang='less' scoped>

</style>